<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <Top></Top>
    <AddCalendar @getMessage="getMessage"></AddCalendar>
    <List :calendarData="calendarData" @getMessage="getMessage" @clearCalendars="clearCalendars"></List>
    <Bottom :complete="complete" :del="del"></Bottom>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import Top from './components/Top'
import Bottom from './components/Bottom'
import AddCalendar from './components/addCalendar'
import List from './components/List'
export default {
  name: 'App',
  components: {
    Top,Bottom,AddCalendar,List
  },
  data() {
    return {
      calendarData:[],
      complete:99,
      del:33
    };
  },
  methods:{   
    getMessage(){
      if(localStorage.info!=undefined){
        this.calendarData=JSON.parse(localStorage.info)
      }else{
        this.calendarData=[]
      }
      this.complete= localStorage.complete===undefined ? 0 : localStorage.complete
      this.del= localStorage.del===undefined ? 0 : localStorage.del
    },
    clearCalendars(){

    }
  },
  mounted(){
    this.getMessage();
    //阻止默认行为
    document.addEventListener('contextmenu',event=>event.preventDefault());
  }
}
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
.app{
  width: 100vw;
  height: 100vw;
  background-color: white;
  display: flex;
  flex-direction: column;
  // touch-action: none;
}
</style>
